<template>
  <view class="schedule-box">
    <!-- 本周的日历 -->
    <view class="schedule-week">
        <view class="schedule-week-title">
            <text class="schedule-week-title-text">{{ todayData }}</text>
            <text class="schedule-week-title-more" @click="moreHandle">更多</text>
        </view>
        <!-- 日历内容 -->
        <view class="schedule-week-content">
            <view v-for="(item,index) in weekDates" :key="index" style="text-align: center;">
                <view class="schedule-week-content-day">{{ item.weekDay }}</view>
                <view @click="selectDate(index, item)" :class="{ selected: selectedIndex === index }" class="schedule-week-content-date">
                    {{ item.day }}
                    <span class="dot" v-if="selectedIndex === index"></span>
                </view>
            </view>
        </view>
    </view>

    <!-- 数据 -->
    <view v-if="list.length" class="schedule-day-list">
        <view class="schedule-day-list-item" @click="clickItem(item)" v-for="(item, index) in list" :key="index">
            <!-- 放置左侧的颜色线 -->
            <view :style="{ backgroundColor: getColor(item.taskStatus) }" class="schedule-day-list-item-left"></view>
            <!-- 内容 -->
            <view class="schedule-day-list-item-content">
                <!-- 左侧 -->
                <view class="item-content-box">
                    <view class="item-content-box-time">{{ item.followupTime }}</view>
                    <view class="item-content-box-text">{{ item.followupContent }}</view>
                </view>
                <!-- 状态 -->
                <view class="item-state-box" :style="{ color: getColor(item.taskStatus) }">{{ bus_task_status[item.taskStatus] }}</view>
            </view>
        </view>
        <uni-load-more :status="status" />
    </view>
    <template v-else>
        <u-empty
            mode="data"
            :icon="empty">
        </u-empty>
    </template>
    
  </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            todayData: null,
            title: 'Hello',
            params: {
                followupType: 0,
                startTime: null,
                endTime: null,
                pageNum: 1,
				pageSize: 500
            },
            weekDates: [],
            status: 'noMore',
            selectedIndex: null,
            list: [],
            empty: '/static/img/other/empty.png',
        }
    },
    created() {
        // this.$u.toast('created')
        // this.bus_task = JSON.parse(uni.getStorageSync('bus_task_status'))
        // this.bus_task_status = convertToDict(this.bus_task)

        // this.weekDates = this.getThisWeekDates()
        // this.setSelectIndex();
        // this.getData()
    },
    mounted() {
        // this.$u.toast('mounted')
        this.bus_task = JSON.parse(uni.getStorageSync('bus_task_status'))
        this.bus_task_status = convertToDict(this.bus_task)

        this.weekDates = this.getThisWeekDates()
        this.setSelectIndex();
        this.getData()
    },
    methods: {
        getData() {
			this.$http.get('/app/followup_record/list', this.params).then(res => {
				if (res.code == 200) {
                    this.status = 'noMore'
                    this.list = res.rows
				} else {
                    this.status = 'noMore'
                }
			})
		},
        getThisWeekDates() {
            const today = new Date();
            const currentDay = today.getDay(); // 0 (周日) 到 6 (周六)
            const diff = today.getDate() - currentDay; // 获取本周周日的日期

            const weekDates = [];
            for (let i = 0; i < 7; i++) {
                const date = new Date(today.setDate(diff + i));
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
                const day = String(date.getDate()).padStart(2, '0');
                const formattedDate = `${year}-${month}-${day}`;
                const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];
                weekDates.push({
                    date: formattedDate,
                    year: year,
                    month: month,
                    day: day,
                    weekDay: weekDay
                });
            }
            return weekDates;
        },
        setSelectIndex() {
            const today = new Date();
            const todayFormatted = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
            this.todayData = todayFormatted;
            this.params.startTime = todayFormatted + ' 00:00:00'
            this.params.endTime = todayFormatted + ' 23:59:59'
            this.selectedIndex = this.weekDates.findIndex(dateObj => dateObj.date === todayFormatted);
        },
        selectDate(index, item) {
            this.selectedIndex = index;
            this.params.startTime = item.date + ' 00:00:00'
            this.params.endTime = item.date + ' 23:59:59'
            this.list = []
            this.params.pageNum = 1
            this.status = 'loading',
            this.getData()
        },
        getColor(state) {
            let color;
            switch (state) {
                case '1001':
                color = 'rgba(103, 117, 133, 1)';
                break;
                case '1002':
                color = 'rgba(0, 186, 173, 1)';
                break;
                case '1003':
                color = 'rgba(255, 141, 26, 1)';
                break;
                default:
                color = 'rgba(103, 117, 133, 1)';
            }
            return color;
        },
        clickItem(item) {
            uni.navigateTo({
                url: '/pages/task/taskDetails?id=' + item.id
            });
        },
        // 查看更多
        moreHandle() {
            uni.navigateTo({
                url: '/pages/index/mySchedule'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.schedule-week {
    padding: 40rpx 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4rpx 20rpx  rgba(227, 227, 227, 0.5);
    .schedule-week-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .schedule-week-title-text {
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
        }
        .schedule-week-title-more {
            padding: 4rpx 20rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: rgba(77, 172, 177, 1);
            border-radius: 8rpx;
            background: rgba(77, 172, 177, 0.1);
        }
    }
}
.schedule-week-content {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    margin-top: 40rpx;
    color: rgba(103, 117, 133, 1);
    .schedule-week-content-day {
        margin-bottom: 24rpx;
    }
    .schedule-week-content-date {
    font-size: 32rpx;
    color: rgba(12, 16, 25, 1);
    position: relative;
    width: 48rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;

    &.selected {
      background: rgba(77, 172, 177, 1);
      color: rgba(255, 255, 255, 1);
      border-radius: 50%;
    }

    .dot {
      position: absolute;
      bottom: -20rpx; /* 调整小点的位置 */
      left: 50%;
      transform: translateX(-50%);
      width: 10rpx;
      height: 10rpx;
      background-color: rgba(77, 172, 177, 1);
      border-radius: 50%;
    }
  }
}
.schedule-day-list {
    padding: 40rpx 30rpx;
    .schedule-day-list-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        border-radius: 20rpx;
        background: rgba(255, 255, 255, 1);
        padding: 32rpx;
        .schedule-day-list-item-left {
            width: 8rpx;
            height: 68rpx;
            border-radius: 40rpx;
            background: rgba(255, 0, 28, 1);
            margin-right: 16rpx;
        }
        .schedule-day-list-item-content {
            flex: 1;
            display: flex;
            align-items: center;
            .item-content-box {
                width: 0;
                flex: 1;
                .item-content-box-time {
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(103, 117, 133, 1);
                }
                .item-content-box-text {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: rgba(12, 16, 25, 1);
                    margin-top: 8rpx;
                    white-space: nowrap; /* 不换行 */
                    overflow: hidden; /* 隐藏溢出内容 */
                    text-overflow: ellipsis; /* 使用省略号 */
                }
            }
            .item-state-box {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-left: 40rpx;
            }
        }
    }

}
</style>